<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class绑定style</title>
<!--  书写页面的样式-->
  <style type="text/css">
    .a{
      width:300px;
      height:200px;
      border:1px solid black;
    }
    .b{
      border-radius: 20px;
    }
    .c{
      background-image:linear-gradient(to right bottom, red, skyblue, blue)
    }
    .d{
      font-size: 20px;
      color: red;
      font-weight:bold ;
    }
  </style>
</head>
<body>
  <div id="app">
    <h3>使用字符串方式绑定样式</h3>
    <div class="a" :class="b">
      测试
      <button @click="changeClass">随机数字改变样式</button>
    </div>
    <br>
    <br>
    <hr>
    <h3>使用对象的方式绑定样式</h3>
    <div class="a" :class="objectS">
      测试对象方式绑定样式
      <button @click="changeClass1">改变样式</button>
    </div>
    <br>
    <br>
    <hr>
    <h3>使用数组的方式绑定样式</h3>
    <div class="a" :class="arrClass">
      测试数组方式绑定样式
      <button @click="changeClass2">改变样式</button>
    </div>
    <br>
    <br>
    <hr>
    <h3>style绑定样式</h3>
<!--    除了使用直接绑定的方式，还可以使用数组等绑定方式，和上述的class绑定样式方法类同-->
    <div class="a" :style="mood">
      测试:style绑定样式
      <button @click="changeClass2">改变样式</button>
    </div>
    <br>
    <br>
    <hr>
  </div>
<script src="../js/vue.js">
</script>
<script type="text/javascript">
    const vm=new Vue({
      el:"#app",
      data(){
        return{
          b:"b",
          objectS:{
            b:"true",
            d:"true"
          },
          arrClass:[
                  "a","b","c"
          ],
          mood:{
            fontSize:"50px",
            color:"red"
          }
        }
      },
      methods:{
        changeClass(){
          let num=Math.random()*10
          console.log(num)
          if (num>3){
            this.b="d"
          }else{
            this.b="b"
          }
        },
        changeClass1(){
          let num=Math.random()*10
          console.log(num)
          if (num>3){
            this.objectS.d=true
          }else{
            this.objectS.d=false
          }
        },
        changeClass2(){
          let num=Math.random()*10
          console.log(num)
          if (num>3){
              let index=this.arrClass.indexOf("d")
              if (index===-1){
                this.arrClass.push("d")
                console.log(this.arrClass)
              }
          }else {
              let index=this.arrClass.indexOf("d")
            if (index!==-1){
              this.arrClass.splice(index,1)
              console.log(this.arrClass)
            }
          }
        }
      }
    })
</script>
</body>
</html>
